<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片上传</title>

    <link rel="stylesheet" href="../css/base.css" />
    <link rel="stylesheet" href="../css/ui/ui.css" />
    <link rel="stylesheet" href="css/UploadImage.css" />
</head>
<body>

<div class="container">

    <!-- 上传图片组件 -->
    <div class='upload-image'>

        <div class='select-images'>
            <div class="upload-show">
                <div class="image-line"><img src="" class="image upload-image-btn" /><span class="selected-count hide">10</span></div>
                <div class="text-line">请选择要上传的图片</div>
                <div class="clear-selected" title="清空已选择的图片"><img src="" class="image" /></div>
                <input type='file' name='upload_images' multiple="multiple" class='upload-images-input'  />
            </div>
            <div class="tip">这边是提示内容</div>
        </div>

        <!-- 预置显示图片 -->
        <div class="init-show-image-list">
            <img src="http://qp333com.oss-cn-hangzhou.aliyuncs.com/7peishang.com/avatar/2017-11-10/bf07531ad5dd288afc93bab47ee8d258.jpg" class="init-show-image" />
            <img src="http://qp333com.oss-cn-hangzhou.aliyuncs.com/7peishang.com/avatar/2017-11-10/bf07531ad5dd288afc93bab47ee8d258.jpg" class="init-show-image" />
            <img src="http://qp333com.oss-cn-hangzhou.aliyuncs.com/7peishang.com/avatar/2017-11-10/bf07531ad5dd288afc93bab47ee8d258.jpg" class="init-show-image" />
        </div>

        <div class='preview-images hide'>
            <!-- 图片上传项目：旧 -->
            <div class="image-item" data-filename="sama-96.jpg">
                <div class="img"><img src="http://qp333com.oss-cn-hangzhou.aliyuncs.com/7peishang.com/avatar/2017-11-10/bf07531ad5dd288afc93bab47ee8d258.jpg" class="image"></div>

                <div class="close"><img src="/UploadImages/Images/delete_unfocus.png" data-focus="/UploadImages/Images/delete_focus.png" data-unfocus="/UploadImages/Images/delete_unfocus.png" class="image"></div>

                <div class="progress hide">
                    <div class="p-total">
                        <div class="p-cur"></div>
                    </div>
                </div>

                <div class="msg hide">
                    <div class="msg-in">成功</div>
                </div>
            </div>

        </div>

        <!-- 待上传列表 -->
        <div class="upload-image-list hide">
            <div class="upload-title">待上传列表</div>

            <div class="image-list">
                <div class="list-content list-title">
                    <div class="item div-preview">图片预览</div>
                    <div class="item div-type">类型</div>
                    <div class="item div-size">大小</div>
                    <div class="item div-speed">速度</div>
                    <div class="item div-status">状态</div>
                    <div class="item div-opr">操作</div>
                </div>

                <div class="list-content list-body">

                    <!-- 项 -->
                    <div class="line total-progress">
                        <div class="line-in">
                            <!-- 上传进度 -->
                            <div class="cur-progress"></div>

                            <!-- 状态 -->
                            <div class="msg hide">
                                <div class="msg-in">...</div>
                            </div>
                            <div class="item div-preview multiple-rows">
                                <div class="row">sama-01.jpg</div>
                                <div class="row"><img src="http://qp333com.oss-cn-hangzhou.aliyuncs.com/7peishang.com/avatar/2017-11-10/bf07531ad5dd288afc93bab47ee8d258.jpg" class="image" /></div>
                            </div>
                            <div class="item div-type">image/jpeg</div>
                            <div class="item div-size">2.4M</div>
                            <div class="item div-speed">50kb/s</div>
                            <div class="item div-status">上传中...</div>
                            <div class="item div-opr multiple-rows">
                                <div class="row"><button type="button" class="btn-1 cancel">取消上传</button></div>
                                <div class="row"><button type="button" class="btn-1 delete">删除图片</button></div>
                            </div>
                        </div>
                    </div>

                </div>

            </div>
        </div>

    </div>

</div>

<br />
<br />
<br />

<button id="upload" class="btn-2">上传</button>

<script src="../SmallJs/SmallJs.js"></script>
<script src="js/UploadImage.js"></script>
<script>
    'use strict';

    var upload = G('#upload');

    var con = G('.container').first();

    var u = G('n.upload_images').first();

    var up = new UploadImage(con.get() , {
        pluginUrl: './' ,
        mode: 'append' ,
        success: function(){
            console.log('上传图片成功：');
        } ,
        callback: function(){
            console.log('所有图片上传完成');
        } ,
    });

    // 设置上传属性
    up.setOpt({
        reqUrl: '' ,
        success: function(json){
            console.log('单张图片完整');
        } ,
        callback: function(){
            console.log('所有图片完成');
        }
    });

    upload.on('click' , function(){
        up.upload();
        // console.log(u.get());
        // u.get().focus();
        // u.get().select();
    } , false ,false);
</script>

</body>
</html>